import React from 'react';
import ActivityMessage from './activityMessage';
import { Button } from '@teamix/ui';
import { Link } from 'utils/router';
import { YunxiaoIcon } from '@alife/devops-ui';
// commits描述
import intl from '../../locale';

export default class CommitsDescription extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isShowMore: false,
    };
  }

  toggleShowMore = () => {
    const { isShowMore } = this.state;
    this.setState({
      isShowMore: !isShowMore,
    });
  };

  render() {
    const { commits, repository_homepage, before, after, projectId, repoUrl, branchName } =
      this.props;
    const { isShowMore } = this.state;
    const restCommitsLength = commits.length - 2;
    return (
      <div>
        <div>
          {commits
            ? commits.map((commit, i) => (
              <ActivityMessage
                isShowMore={isShowMore}
                branchName={branchName}
                repoUrl={repoUrl}
                projectId={projectId}
                commit={commit}
                i={i}
              />
              ))
            : null}
        </div>
        {commits.length > 2 ? (
          <div className="activity-show-more-commits">
            <Button
              type="primary"
              text
              className="activity-toggle-more-commits-btn"
              onClick={this.toggleShowMore}
            >
              {isShowMore
                ? intl.get({
                    id: 'code-assets.components.activityList.commitsDescription.PutAway',
                    defaultMessage: '收起',
                  })
                : intl.get(
                    {
                      id: 'code-assets.components.activityList.commitsDescription.ExpandTheRemainingRestcommitslengthCommits',
                      defaultMessage: '展开其余 {restCommitsLength} 个 commit',
                    },
                    { restCommitsLength },
                  )}
              <YunxiaoIcon
                type={isShowMore ? 'arrow-up-2-line' : 'arrow-down-2-line'}
                style={{ marginLeft: 4 }}
              />
            </Button>
            <br />
          </div>
        ) : null}
        {commits && commits.length >= 2 ? (
          <div className="activity-go-compare-link">
            <Link
              to={`${repository_homepage}/compare?from=${encodeURIComponent(
                before,
              )}&to=${encodeURIComponent(after)}&tab=activity`}
              className="text-gray-08"
            >
              {intl.get({
                id: 'code-assets.components.activityList.commitsDescription.Comparison',
                defaultMessage: '比较',
              })}
              &nbsp;
              {before.slice(0, 8)}...{after.slice(0, 8)}
            </Link>
          </div>
        ) : null}
      </div>
    );
  }
}
